import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import ContextMenu from "@/pages/ContextPage/PubContentPage/ContextMenu";
import {IPage, PojInfoDto} from "@/api/Types/ObjInterfaces.ts";
import PojApi from "@/api/PojApi.ts";
import PojViewer from "@/components/PojViewer.tsx";
import {Empty, Pagination} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 50% 50%;
        `,
        footer: css`
            width: 1000px;
            display: flex;
            place-content: center;
        `
    }
})

const PubContentPage: React.FC = () => {
    const styles = useStyles().styles;
    const [pojInfoDtoPage, setPojInfoDtoPage] = useState<IPage<PojInfoDto>>()
    const [pageProp, setPageProp] = useState({current: 1, size: 10})

    useEffect(() => {
        PojApi.pagePoj(pageProp.current, pageProp.size).then(data => {
            setPojInfoDtoPage(data)
        })
    }, [pageProp]);

    if (pojInfoDtoPage == null) {
        return (
            <div>
                <Empty/>
            </div>
        )
    }

    return (
        <div>
            <ContextMenu/>
            <ul className={styles.container}>
                {pojInfoDtoPage.records.map(item => {
                    return (
                        <li key={item.id}>
                            <PojViewer pojInfoDto={item}/>
                        </li>
                    )
                })}
            </ul>
            <div className={styles.footer}>
                <Pagination
                    current={pojInfoDtoPage.current}
                    pageSize={pojInfoDtoPage.size}
                    total={pojInfoDtoPage.total}
                    showSizeChanger
                    onChange={(page, pageSize) => {
                        setPageProp({
                            current: page,
                            size: pageSize
                        })
                    }}
                />
            </div>
        </div>
    )
}

export default PubContentPage